<template>
  <div :id="clsid" :class="['BaZiJianPiTxtView',(msg.type===0?'backcolor0':'backcolor1')]"    >
    <div class="view">
      <div class="title">
        {{msg.title}}
      </div>
      <div class="txtView">
        <div class="txtDiv">
          <div class="txt" v-if="msg.type===0" >
            <div v-html="msg.txt"></div>
            <!--{{msg.txt}}-->
          </div>
          <div class="txt" v-if="msg.type===1">
            <div class="itemtxt">
              <div class="sui">
                <span class="sp1">6岁</span>
                <img src="../../assets/img/life/3jiao.png" style="position:relative;width: 0.32rem;height: 0.32rem;    float: right;">
              </div>
              <div class="suitxt">
                <p>
                  <span class="sp1">>></span>
                  <span class="sp2">{{msg.txt}}</span>
                </p>
                <p>
                  <span class="sp1">>></span>
                  <span class="sp2">{{msg.txt}}</span>
                </p>
              </div>
            </div>
            <div class="itemtxt">
              <div class="sui">
                <span class="sp1">12岁</span>
                <img src="../../assets/img/life/3jiao.png" style="position:relative;width: 0.32rem;height: 0.32rem;    float: right;">
              </div>
              <div class="suitxt">
                <p>
                  <span class="sp1">>></span>
                  <span class="sp2">{{msg.txt}}</span>
                </p>
                <p>
                  <span class="sp1">>></span>
                  <span class="sp2">{{msg.txt}}</span>
                </p>
              </div>
            </div>
          </div>

        </div>
      </div>
      <div @click="btnClick()" :class="['btn',(store.state.ispay?'viewHide':'viewShow')]"></div>
    </div>
  </div>
</template>

<style scoped>
.BaZiJianPiTxtView{
  border-radius: 0.25rem;width: 7.18rem;
}
.backcolor0{
  background-color: #F2F2F2;
}
.backcolor1{
  background-color: #F4EBE2;
}
.view{
  color: #F1C6B8;padding-bottom: 0.2rem;
}
.title{
  position: relative;height: 0.82rem;text-align: left;font-weight: 600;font-size: 0.28rem;color: #000000;line-height: 0.82rem;
  margin-left: 0.4rem;
}
.txtView{
  position:relative;
}




.txtView .txtDiv{
  position:relative;min-height: 0.5rem;text-align: left;width: 6.08rem;left: 0.4rem;
  font-weight: 400;font-size:0.26rem;color: #666666;line-height: 0.4rem;
}
.txtView .txtDiv .txt{
  position:relative;
}
.txtView .txtDiv .txt .itemtxt{
  position:relative;background-color: #FFFFFF;margin-bottom: 0.2rem;border-radius: 0.25rem;
}

.txtView .txtDiv .txt .sui{
  position:relative;height: 0.36rem;background-color: #F2F2F2;color: #FA4A4A;line-height: 0.36rem;
}
.txtView .txtDiv .txt .sui .sp1{
  padding-left: 0.1rem;
}
.txtView .txtDiv .txt .suitxt{
  position:relative;padding-bottom: 0.2rem;
}
.txtView .txtDiv .txt .suitxt p{
  font-weight: 400;font-size: 0.22rem;color: #666666;line-height: 0.32rem;padding-bottom: 0.1rem;
}
.txtView .txtDiv .txt .suitxt p .sp1{

}
.txtView .txtDiv .txt .suitxt p .sp2{
  padding-left: 0.1rem;
}
.view .btn{
  position:relative;background-image: url("../../assets/img/life/jsuoBtn.png");width: 5rem;height:0.8rem;left: 1.08rem;
}
</style>
<script setup>
import Enum from "@/gamejs/Enum";
import Util from "@/gamejs/Util";
import {ref, onMounted, onBeforeUnmount, onUnmounted,watch,computed} from "vue";
import { useStore} from 'vuex';
import {useRoute, useRouter} from 'vue-router';

let store = useStore();
let clsid=winApp.getClsId();
let router = useRouter();
let msgref=defineProps({
  msg: {
    type: Object,
    default: {title:'八字提要title',txt:'rrr',type:0},
  },
});

/*组件挂载完成后执行的函数；*/
onMounted(() => {

  console.log("BaZiJianPiTxtView onMounted  近况简批");

});
onUnmounted(() => {
  //卸载组件实例后调用,调用此钩子时,组件实例的所有指令都被解除绑定,所有事件侦听器都被移除,所有子组件实例被卸载。
  // winApp.deleteNotification(clsid);
  console.log("BaZiJianPiTxtView onUnmounted  卸载组件实例后  ",clsid);
});
function btnClick(){
  console.log("BaZiJianPiTxtView btnClick  ");
  store.state.view.paySelectView=Enum.view_status_1;
}
</script>
